<template>
  <div>
    <div class="container-fluid">
      <div class="common_title">文章类别管理</div>
      <div class="container-fluid common_con">
        <table
          class="
            table table-striped table-bordered table-hover
            mp20
            category_table
          "
        >
          <thead>
            <tr>
              <th>名称</th>
              <th>Slug</th>
              <th class="text-center" width="100">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in list" :key="item.id">
              <td>{{ item.name }}</td>
              <td>{{ item.slug }}</td>
              <td class="text-center">
                <a
                  href="javascript:void(0)"
                  data-toggle="modal"
                  class="btn btn-info btn-xs"
                  @click="doEdit(item)"
                  >编辑</a
                >
                <a
                  href="javascript:void(0)"
                  class="btn btn-danger btn-xs"
                  @click="doRemove(item.id)"
                  >删除</a
                >
              </td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="3" class="text-center">
                <a
                  href="javascript:void(0)"
                  class="btn btn-success"
                  id="xinzengfenlei"
                  data-toggle="modal"
                  data-target="#myModal"
                  @click="showDialog = true"
                  >新增分类</a
                >
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
    <el-dialog
      title="文章分类管理"
      :visible.sync="showDialog"
      :modal-append-to-body="false"
    >
      <el-form>
        <el-form-item label="分类名称" label-width="120px">
          <el-input v-model="name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类描述" label-width="120px">
          <el-input v-model="slug" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="doAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入文章接口
import {
  getArticleCategory,
  addArticleCategory,
  editArticleCategory,
  deleteArticleCategory,
} from "./article.js";
export default {
  name: "articleCategory",
  data() {
    return {
      list: {}, //首页加载获得数据
      name: "", //分类名称
      slug: "", //分类描述
      id: "", //分类id
      showDialog: false, //弹窗的显示隐藏
      isEdit: false, // 判断是否是编辑
    };
  },
  created() {
    this.reload();
  },
  methods: {
    async reload() {
      let res = await getArticleCategory();
      //   console.log(res);
      this.list = res.data.data;
    },
    doEdit(item) {
      this.showDialog = true;
      (this.name = item.name), (this.slug = item.slug), (this.id = item.id);
      this.isEdit = true;
    },
    async doAdd() {
      // 非空判断
      if (this.name == "" || this.slug == "") {
        this.$message("请输入点啥吧！！！！");
        return;
      }
      if (this.isEdit) {
        //   编辑请求
        let res = await editArticleCategory({
          name: this.name,
          slug: this.slug,
          id: this.id,
        });
        console.log(res);
        //
        this.isEdit = false;
        //   轻弹窗
        this.$message(res.data.msg);
      } else {
        //   新增请求
        let res = await addArticleCategory({
          name: this.name,
          slug: this.slug,
        });
        // console.log(res);
        //   轻弹窗
        this.$message(res.data.msg);
      }

      // 关闭弹窗
      this.showDialog = false;
      //   清空输入框内容
      this.name = "";
      this.slug = "";
      //   重新加载页面
      this.reload();
    },
    // 删除请求
    async doRemove(id) {
      let res = await deleteArticleCategory(id);
      console.log(res);
      //   轻弹窗
      this.$message(res.data.msg);
      //   重新加载页面
      this.reload();
    },
  },
};
</script>

<style></style>
